<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-bar">
        <div style="display: flex; justify-content: flex-start;">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="搜索：">
            <el-select v-model="searchForm.condition" placeholder="请选择" style="width: 120px;">
                <el-option label="全部" value="all"></el-option>
                <el-option label="订单标题" value="orderTitle"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item>
            <el-input v-model="searchForm.keyword" placeholder="请输入搜索内容" style="width: 160px;"></el-input>
            </el-form-item>

            <el-form-item label="状态搜索：">
            <el-select v-model="searchForm.statusCondition" placeholder="请选择" style="width: 120px;">
                <el-option label="全部" value="statusall"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="争议中" value="4"></el-option>
                <el-option label="待处理" value="5"></el-option>
                <el-option label="处理中" value="6"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSearch" style="height: 32px; padding: 0 12px; font-size: 12px;">搜索</el-button>
            </el-form-item>

            <el-form-item>
              <el-button @click="resetSearch" style="height: 32px; padding: 0 12px; font-size: 12px;">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>

    <!-- 售后列表 -->
    <el-table :data="afterList" height="510" border style="width: 100%">
        <el-table-column 
            :label="header" 
            v-for="header in tableHeader" :key="header" 
            :prop="getPropName(header)"
            width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">处理</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 处理售后对话框 -->
    <el-dialog title="处理售后" :visible.sync="dialogVisible" width="30%">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="处理结果">
          <el-input v-model="editForm.afterResult" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="是否完成">
          <el-switch v-model="editForm.isCompleted"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAfterSale">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
        <el-pagination
            @size-change="changePageSize"               
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[2, 3, 4, 5,7,9]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>    
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableHeader: ['ID', '订单ID', '订单标题', '老板姓名', '陪玩姓名', '游戏类型', '订单状态', '创建时间', '处理结果'],  
      afterList:[],
      count:0,        //总条数
      params:{
          pageNum:1,      //当前页
          pageSize:9,     //页容量
      },
      searchForm: {
        condition: 'all', // 搜索条件字段名
        statusCondition: 'statusall',  // 状态搜索条件字段名
        keyword: ''    // 搜索关键词
      },
      dialogVisible: false,
      editForm: {
        id: null,
        afterResult: '',
        isCompleted: false
      },
      orderStatusMap: {
        0: '已发布',
        1: '游戏中',
        2: '审核中',
        3: '已完成',
        4: '争议中',
        5: '待处理',
        6: '处理中'
      },
      currentRow: null
    }
  },
  methods:{
    // 根据表头获取对应的属性名
    getPropName(header){
      const mapping = {
        'ID': 'id',
        '订单ID': 'orderId',
        '订单标题': 'orderTitle',
        '老板姓名': 'bossName',
        '陪玩姓名': 'playmateName',
        '游戏类型': 'gameTypeName',
        '订单状态': 'orderStatus',
        '创建时间': 'createTime',
        '处理结果': 'afterResult'
      }
      return mapping[header];
    },
    // 加载售后列表
     async loadafterList() {
      const searchParams = {
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          tenantId: 1,
          searchAfterSaleStatus: this.searchForm.statusCondition !== 'statusall' ? parseInt(this.searchForm.statusCondition) : null,
          searchOrderTitle: this.searchForm.condition === 'orderTitle' ? this.searchForm.keyword : null
        };
        const response = await this.customerServiceApi.queryAfterSaleOrderList(searchParams);
        if(response.code == 200){

          this.afterList = response.data.list.map(item => { 
            return{
              ...item,
              orderStatus: this.orderStatusMap[item.orderStatus]
            }
          })
          this.count = response.data.total; 
        }else{
          this.$message.error(response.message);
        }
     },
     // 处理编辑
     handleEdit(row) {
      this.currentRow = row;
      this.editForm.id = row.id;
      this.editForm.afterResult = row.afterResult || '';
      this.editForm.isCompleted = false;
      this.dialogVisible = true;
    },
    // 更新售后状态
    async updateAfterSale(){
      const updateParams = {
        id: this.editForm.id,
        afterResult: this.editForm.afterResult,
        isCompleted: this.editForm.isCompleted,
        tenantId: 1 
      };
      const response = await this.customerServiceApi.updateAfterSaleOrder(updateParams);
      if (response.code === 200) { 
        this.$message.success("更新成功");
        this.dialogVisible = false;
        this.loadafterList();
      }else{
        this.$message.error(response.message);
      }
    },
    //搜索
    handleSearch() {
      this.loadafterList();
    },
    // 重置搜索条件
    resetSearch() {
      this.searchForm.condition = 'all'; // 清空第一个搜索条件
      this.searchForm.statusCondition = 'statusall'; // 清空状态搜索条件
      this.searchForm.keyword = ''; // 清空关键词
      this.loadafterList(); // 重新加载列表（可选）
    },
     // 改变页大小
    changePageSize(val) {
      this.params.pageSize = val;
      this.params.pageNum = 1; // 重置到第一页
      this.loadafterList();
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.loadafterList();
    }
  },
  created(){
    this.loadafterList();
  }
};
</script>

<style scoped>
.search-bar {
  padding: 5px 0; /* 减小上下内边距 */
}

.demo-form-inline {
  display: flex;
  align-items: center;
  gap: 8px; /* 减小组件之间的间距 */
}

.el-form-item {
  margin-top: 0; /* 移除默认的顶部外边距 */
  margin-bottom: 0; /* 移除默认的底部外边距 */
}

.el-select .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-input .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-button {
  height: 30px; /* 进一步减小高度 */
  padding: 0 10px; /* 减小内边距 */
  font-size: 12px;
}
</style>
